<template>
	<view class="content">
		<view class="content_body">
			<view>
				<view class="lobo padds">
					<u-swiper :list="list1"></u-swiper>
				</view>

				<view class="padds Menusd">
					<u-scroll-list>
						<view v-for="(item, index) in listMenu" :key="index">
							<view class="Menus">
								<view class="img_s">
									<img style='width: 50px; height: 50px;' :src="item.cover">
								</view>
								<text class="sizes_12">{{item.name}}</text>
							</view>
						</view>
					</u-scroll-list>
				</view>
				<view class="padds">
					<view class="img_ggao">
						<img style='height: 120px;width: 100%;' src='../../static/gg1.jpg'>
					</view>
				</view>

				<view class="toutiao padds">
					<view class="gg_i">
						<u-notice-bar @click="click()" bgColor='#fff' :text="text1" direction='column' speed="100">
						</u-notice-bar>
					</view>
				</view>

				<view class="benzhou padds">
					<view class="top_zhouxin">
						<text
							style="border-right: 1px solid #616161; padding: 0 5px 0 0 ; margin-right: 5px;">特价专区</text>
						<text class="sizes_12 textcloloF7">特价专区 引领新鲜</text>
					</view>
					<view class="body_zhuxin">
						<view class="tiejia">
							<view class="tijia_top_s">

								<view class="shangxinlist" v-for="itemt in xianshilist">
									<view @click="toxiangQ(itemt.code)" class="shangxinlist_img">
										<img class='img_shang' :src='itemt.cover' alt="">
									</view>
									<view @click="toxiangQ(itemt.code)" class="shangxinlist_text sizes_12"
										style="margin-bottom: 5px;">
										{{itemt.name}}
									</view>
									<view @click="toxiangQ(itemt.code)" class="shangxinlist_text sizes_12">
										<text
											style="background-color: #61615f; color: #fdf5c8;padding: 1px 5px 1px 5px; margin: 5px 0 5px 0;">特价上市</text>
									</view>
								</view>

								<view class="shangxinlist"
									style=" display: flex;justify-content: center;flex-direction: column;    height: 110px; background-color: #f2f2f2;">
									<view class="">
										<view class="shangxinlist_texts sizes_12">
											<text class="textcloloF7 sizes_12">点击查看</text>
										</view>
										<view class="shangxinlist_texts sizes_12">
											<text class="textcloloF7 sizes_12">更多特价</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 过度 -->
				<view class="guodu padds">
					<view class="guodu_body">
						<view v-for="q in 4"
							style="height:45px; display: flex;justify-content: space-between;flex-direction: column;">
							<view>
								官方直采
							</view>
							<view class="sizes_12 textcloloF7">
								完整生态链
							</view>
						</view>
					</view>
				</view>

				<view class="Muenst padds">

					<view class="Muenst_top">
						<view class="Muenst_top_li" v-for="(items,index) in claslist">
							{{items.name}}
						</view>
					</view>

					<view class="Muenst_main">
						<view style="width: 100%;">
							<img style="width: 100%;height: 150px;" src='../../static/gg1.jpg' alt="">
						</view>
					</view>


					<view class="body_zhuxin">
						<view class="tiejia">
							<view class="tijia_top_s">

								<view class="shangxinlist" style="width: 47%;height: 255px;" v-for="items in shoplist">
									<view @click="toxiangQ(items.code)" class="shangxinlist_img" style="height: 160px;">
										<img class='img_shang' :src='items.cover' alt="">
									</view>
									<view @click="toxiangQ(items.code)" class="shangxinlist_text sizes_12"
										style="margin-bottom: 5px; margin-top: 10px;">
										{{items.name}}
									</view>
									<view class="shangxinlist_text sizes_12">
										<text
											style="background-color: #61615f; color: #fdf5c8;padding: 1px 5px 1px 5px; margin: 5px 0 5px 0;">新鲜上市</text>
									</view>
								</view>


							</view>
						</view>
					</view>

				</view>


			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1: [

				],
				listMenu: [

				],
				text1: [],
				claslist: [],
				//限时秒杀
				getGoodlist: {
					page: 1
				},
				xianshilist: [],
				shoplist: []
			}
		},

		onReachBottom() {

			this.getGoodlist.page = this.getGoodlist.page + 1
			this.logshoplistpage()
		},

		onLoad() {
			// this.getlogimg()
		},
		onShow() {
			this.getGoodlist.page = 1
			this.loggetGoods()
			this.getlogimg()
			this.logshoplist()
		},
		methods: {
			getlogimg() {
				this.$http.getlogins().then(res => {
					for (var a = 0; a < res.data.length; a++) {
						this.list1.push(res.data[a].img)
					}

					console.log(this.list1);

				})

				this.$http.getMenu().then(res => {
					// console.log(res);
					//cover 图  name 名
					this.listMenu = res.data
				})

				this.$http.getNotify().then(res => {

					for (var i = 0; i < res.data.length; i++) {
						this.text1.push(res.data[i].name)
					}
				})

				this.$http.getCate().then(res => {
					this.claslist = res.data
				})
			},

			//现时秒杀
			loggetGoods() {
				this.$http.getGoods(this.getGoodlist).then(res => {
					console.log("////////*///////////");
					console.log(res.data.list);
					this.xianshilist = res.data.list
				})
			},


			//全部
			logshoplist() {
				this.$http.getAllGoods(this.getGoodlist).then(res => {
					console.log("////////*///////////");
					console.log(res.data.list);
					this.shoplist = res.data.list
				})
			},

			//全部page
			logshoplistpage() {
				this.$http.getAllGoods(this.getGoodlist).then(res => {
					for (var i = 0; i < res.data.list.length; i++) {
						this.shoplist.push(res.data.list[i])
					}
				})
			},


			toxiangQ(id) {
				console.log(id);
				uni.navigateTo({
					url: '../xiangqing/xiangqing?id=' + id
				})
			},



			click(index) {
				console.log(index);
			}
		}
	}
</script>

<style>
	.sizes_12 {
		font-size: 12px;
	}
</style>

<style>
	.shangxinlist_text {
		height: 50px;
		overflow: hidden;

		text-overflow: ellipsis;

		display: -webkit-box;

		-webkit-line-clamp: 3;

		-webkit-box-orient: vertical;
	}

	.padds {
		padding: 10px;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #f7f7f7;
	}

	.content_body {
		width: 100%;
		background-color: #f7f7f7;
	}

	.lobo {
		background-color: #fff;
	}

	.Menus {
		padding: 8px;
	}

	.Menusd {
		border-radius: 0 0 30px 30px;
		background-color: #fff;
	}

	.img_s {
		width: 50px;
		height: 50px;
		overflow: hidden;
		border-radius: 50%;
	}

	.img_ggao {
		width: 100%;
		display: flex;
		justify-content: center;
		background-color: transparent;
	}

	.toutiao {
		background-color: #fff;
		border-radius: 10px 10px 0 0;
	}

	.gg_i {
		border-bottom: 1px solid #f7f7f7;
	}

	.textcloloF7 {
		color: #3e3e3e;
	}

	.benzhou {
		background-color: #fff;
	}

	.shangxinlist {
		width: 30%;
		height: 30%;
		margin: 5px 5px 4% 5px;
		text-align: center;
		float: left;
	}

	.shangxinlist_img {
		width: 100%;
		height: 110px;
	}

	.img_shang {
		width: 100%;
		height: 100%;
	}

	.tiejia {
		display: flex;
		justify-content: center;
		flex-direction: column;
		background-color: #fff;
	}

	.guodu {
		display: flex;
		justify-content: center;
		flex-direction: column;
		background-color: #fff;
		margin-top: 20px;

		border-radius: 20px;
	}

	.guodu_body {
		display: flex;
		justify-content: space-around;
	}

	.guodu_body>view:nth-child(1) {
		padding-right: 16px;
		border-right: 1px solid #b9b9b6;
	}

	.guodu_body>view:nth-child(2) {
		padding-right: 16px;
		border-right: 1px solid #b9b9b6;
	}

	.guodu_body>view:nth-child(4) {
		padding-left: 16px;
		border-left: 1px solid #b9b9b6;
	}

	.Muenst_top {
		background-color: #fff;
		overflow-x: scroll;
		line-height: 25px;
	}

	.Muenst_top_li {
		font-size: 14px;
		white-space: nowrap;
		float: left;
		padding: 5px 10px 5px 10px;
		margin-right: 10px;
		width: 50px;
	}
</style>
